<template>
    <div class="body_content">
        <div class="nav_header">
            <mu-appbar color="primary">
                <mu-button icon slot="left">
                    <mu-icon value="menu"></mu-icon>
                </mu-button>
                {{title}}
            </mu-appbar>
        </div>
        <div class="contaniner_box">
            <transition name="fade" mode="out-in">
                <!-- 缓存所有的页面 -->
                <keep-alive>
                    <router-view v-if="$route.meta.keepAlive"></router-view>
                </keep-alive>
            </transition>
            <!-- <transition name="fade" mode="out-in">
                <router-view v-if="!$route.meta.keepAlive"></router-view>
            </transition> -->
        </div>
        <div class="nav_bottom">
            <mu-bottom-nav :value.sync="shift" shift @change="getPathTitle()">
                <mu-bottom-nav-item value="Daily" title="日更" icon="chat" to="Daily"></mu-bottom-nav-item>
                <mu-bottom-nav-item value="Cats" title="喵斯卡" icon="loyalty" to="Cats"></mu-bottom-nav-item>
                <mu-bottom-nav-item value="Gifts" title="福利社" icon="card_giftcard" to="Gifts"></mu-bottom-nav-item>
            </mu-bottom-nav>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'index',
        data() {
            return {
                shift: "", //默认
                title: ""
            }
        },
        mounted() {
            //获取当前路由名称
            this.shift = (this.$route.path).split("/")[1];
            this.getPathTitle()
        },
        methods: {
            getPathTitle() {
                switch (this.shift) {
                    case "Daily":
                        this.title = "日更"
                        break;
                    case "Cats":
                        this.title = "喵斯卡"
                        break;
                    case "Gifts":
                        this.title = "福利社"
                        break;
                }
            }
        }
    }
</script>

<style scoped lang="less">
    body {
        overflow: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    a {
        color: #fff;
    }
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity .5s
    }
    .fade-enter,
    .fade-leave-active {
        opacity: 0
    }
    .nav_bottom {
        position: fixed;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 1;
    }
    .nav_header {
        right: 0;
        left: 0;
        top: 0;
        position: fixed;
        z-index: 1;
    }
    .contaniner_box {
        padding: 56px 0;
    } // .body_content {
    // width: 100%;
    // height: 100%;
    // .contaniner_box {
    //     width: 100%;
    //     height: 100%;
    //     height: calc(100% - 112px);
    //     overflow: hidden;
    //     overflow-y: auto;
    //     -webkit-overflow-scrolling: touch;
    // }
    // }
</style>

